<template>
  <div class="page-container">
    <div class="dashboard-grid">
      <!-- 通知统计 -->
      <div class="grid-section stats-section">
        <NotificationStats :stats="notificationStats" />
      </div>

      <!-- 快速操作 -->
      <div class="grid-section quick-actions">
        <h3 class="section-title">快速操作</h3>
        <div class="action-buttons">
          <el-button type="primary" plain @click="handleQuickAction('markAllRead')">
            <el-icon><Check /></el-icon>
            全部标记已读
          </el-button>
          <el-button type="success" plain @click="handleQuickAction('settings')">
            <el-icon><Setting /></el-icon>
            通知设置
          </el-button>
          <el-button type="warning" plain @click="handleQuickAction('filter')">
            <el-icon><Filter /></el-icon>
            筛选规则
          </el-button>
        </div>
      </div>

      <!-- 通知分析 -->
      <div class="grid-section notification-analytics">
        <h3 class="section-title">通知分析</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="analytics-card">
              <div class="analytics-header">
                <span>通知类型分布</span>
                <el-tag size="small">本周</el-tag>
              </div>
              <div class="analytics-chart">
                <el-progress 
                  type="dashboard" 
                  :percentage="getTypePercentage('system')" 
                  :color="systemColor"
                  :stroke-width="8"
                >
                  <template #default="{ percentage }">
                    <span class="progress-label">系统通知</span>
                    <span class="progress-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="analytics-card">
              <div class="analytics-header">
                <span>响应时间</span>
                <el-tag size="small" type="success">良好</el-tag>
              </div>
              <div class="analytics-chart">
                <el-progress 
                  type="dashboard" 
                  :percentage="85" 
                  :color="successColor"
                  :stroke-width="8"
                >
                  <template #default="{ percentage }">
                    <span class="progress-label">平均响应</span>
                    <span class="progress-value">{{ percentage }}%</span>
                  </template>
                </el-progress>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 主要通知列表卡片 -->
      <div class="grid-section notification-list-section">
        <div class="base-card main-card">
          <div class="card-header">
            <div class="header-left">
              <h2>通知列表</h2>
              <el-radio-group v-model="filter" size="small">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="unread">未读</el-radio-button>
                <el-radio-button label="read">已读</el-radio-button>
              </el-radio-group>
            </div>
            <div class="header-right">
              <el-button-group>
                <el-button type="primary" :icon="Check" @click="markAllRead">
                  全部已读
                </el-button>
                <el-button type="danger" :icon="Delete" @click="clearAll">
                  清空通知
                </el-button>
              </el-button-group>
            </div>
          </div>

          <!-- 通知列表 -->
          <div class="card-body" v-loading="loading">
            <el-empty v-if="filteredNotifications.length === 0" description="暂无通知" />
            
            <template v-else>
              <TransitionGroup name="list" tag="div" class="notification-list">
                <div
                  v-for="notification in filteredNotifications"
                  :key="notification.id"
                  class="list-item"
                  :class="{ 'is-unread': !notification.read }"
                >
                  <div class="item-icon" :class="getNotificationIcon(notification.type).class">
                    <el-icon :size="24">
                      <component :is="getNotificationIcon(notification.type).icon" />
                    </el-icon>
                  </div>
                  
                  <div class="item-content">
                    <div class="item-title">
                      {{ notification.title }}
                      <el-tag 
                        v-if="!notification.read" 
                        size="small" 
                        type="danger" 
                        effect="dark"
                        class="unread-tag"
                      >新</el-tag>
                    </div>
                    <div class="item-description">{{ notification.message }}</div>
                    <div class="item-meta">
                      <el-icon><Clock /></el-icon>
                      <span>{{ formatTime(notification.time) }}</span>
                    </div>
                  </div>

                  <div class="item-actions">
                    <el-tooltip
                      v-if="!notification.read"
                      content="标记为已读"
                      placement="top"
                      :show-after="500"
                    >
                      <el-button 
                        type="primary" 
                        circle
                        @click="markAsRead(notification)"
                      >
                        <el-icon><Check /></el-icon>
                      </el-button>
                    </el-tooltip>

                    <el-dropdown trigger="click">
                      <el-button circle>
                        <el-icon><More /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="handleAction(notification)">
                            <el-icon><View /></el-icon>查看详情
                          </el-dropdown-item>
                          <el-dropdown-item divided @click="deleteNotification(notification)">
                            <el-icon><Delete /></el-icon>删除通知
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </TransitionGroup>
            </template>

            <!-- 分页 -->
            <div class="pagination-section">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Message,
  Bell,
  Share,
  Document,
  Warning,
  More,
  Check,
  View,
  Delete,
  Clock,
  Setting,
  Filter
} from '@element-plus/icons-vue'
import NotificationStats from './common/NotificationStats.vue'

const loading = ref(false)
const filter = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 通知统计数据
const notificationStats = computed(() => ({
  unread: unreadCount.value,
  system: systemCount.value,
  share: shareCount.value,
  unreadTrend: 5,  // 示例：增长趋势
  systemTrend: -2, // 示例：下降趋势
  shareTrend: 10   // 示例：增长趋势
}))

// 统计数据
const unreadCount = ref(2)
const systemCount = ref(5)
const shareCount = ref(3)

// 模拟通知数据
const notifications = ref([
  {
    id: 1,
    type: 'document_share',
    title: '文档分享提醒',
    message: '用户 张三 与您分享了文档 "项目计划书.docx"',
    time: '2024-03-09 14:30:00',
    read: false
  },
  {
    id: 2,
    type: 'system',
    title: '系统通知',
    message: '系统将于今晚 23:00 进行例行维护',
    time: '2024-03-09 13:00:00',
    read: true
  },
  {
    id: 3,
    type: 'warning',
    title: '存储空间警告',
    message: '您的存储空间已使用 90%，请及时清理',
    time: '2024-03-09 10:15:00',
    read: false
  }
])

// 根据通知类型获取图标
const getNotificationIcon = (type) => {
  const icons = {
    document_share: { icon: Share, class: 'icon-share' },
    system: { icon: Bell, class: 'icon-system' },
    warning: { icon: Warning, class: 'icon-warning' },
    message: { icon: Document, class: 'icon-message' },
    document: { icon: Document, class: 'icon-document' }
  }
  return icons[type] || icons.message
}

// 过滤通知
const filteredNotifications = computed(() => {
  if (filter.value === 'all') return notifications.value
  const isRead = filter.value === 'read'
  return notifications.value.filter(notification => notification.read === isRead)
})

// 格式化时间
const formatTime = (timeString) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 标记单个通知为已读
const markAsRead = (notification) => {
  notification.read = true
  unreadCount.value--
  ElMessage.success('已标记为已读')
}

// 标记所有通知为已读
const markAllRead = () => {
  notifications.value.forEach(notification => {
    if (!notification.read) {
      notification.read = true
      unreadCount.value--
    }
  })
  ElMessage.success('已全部标记为已读')
}

// 清空所有通知
const clearAll = () => {
  ElMessageBox.confirm(
    '确定要清空所有通知吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    notifications.value = []
    unreadCount.value = 0
    systemCount.value = 0
    shareCount.value = 0
    ElMessage.success('已清空所有通知')
  })
}

// 删除单个通知
const deleteNotification = (notification) => {
  ElMessageBox.confirm(
    '确定要删除这条通知吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = notifications.value.findIndex(n => n.id === notification.id)
    if (index !== -1) {
      if (!notifications.value[index].read) {
        unreadCount.value--
      }
      if (notifications.value[index].type === 'system') {
        systemCount.value--
      } else if (notifications.value[index].type === 'document_share') {
        shareCount.value--
      }
      notifications.value.splice(index, 1)
      ElMessage.success('通知已删除')
    }
  })
}

// 处理通知动作
const handleAction = (notification) => {
  // 根据通知类型处理不同的动作
  switch (notification.type) {
    case 'document_share':
      // 跳转到共享文档
      break
    case 'warning':
      // 跳转到系统设置
      break
    default:
      // 默认行为
      break
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

// 新增方法
const handleQuickAction = (action) => {
  switch (action) {
    case 'markAllRead':
      markAllRead()
      break
    case 'settings':
      ElMessage.info('打开通知设置')
      break
    case 'filter':
      ElMessage.info('打开筛选规则设置')
      break
  }
}

// 图表颜色
const systemColor = [
  { color: '#6366f1', percentage: 0 },
  { color: '#8b5cf6', percentage: 100 }
]

const successColor = [
  { color: '#10b981', percentage: 0 },
  { color: '#059669', percentage: 100 }
]

// 获取通知类型百分比
const getTypePercentage = (type) => {
  const total = notifications.value.length
  if (total === 0) return 0
  const typeCount = notifications.value.filter(n => n.type === type).length
  return Math.round((typeCount / total) * 100)
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 24px;
  background-color: var(--el-bg-color-page, #f0f2f5);
  min-height: 100vh;
}

.dashboard-grid {
  display: grid;
  gap: var(--spacing-large);
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "stats stats stats stats stats stats stats stats stats stats stats stats"
    "quick quick quick quick analytics analytics analytics analytics analytics analytics analytics analytics"
    "list list list list list list list list list list list list";
}

.stats-section {
  grid-area: stats;
}

.quick-actions {
  grid-area: quick;
}

.notification-analytics {
  grid-area: analytics;
}

.notification-list-section {
  grid-area: list;
}

.grid-section {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

.quick-actions {
  .action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 8px 0;

    .el-button {
      width: 100%;
      height: 40px;
      justify-content: center;
    }
  }
}

.notification-analytics {
  .analytics-card {
    background: var(--el-bg-color-overlay);
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    border: 1px solid var(--el-border-color-lighter);

    .analytics-header {
      margin-bottom: 20px;

      span {
        font-size: 15px;
        font-weight: 500;
      }
    }

    .analytics-chart {
      padding: 16px 0;
    }
  }
}

.notification-list {
  gap: 16px;
}

.list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  gap: 20px;
  margin: 0;

  &:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .item-content {
    margin: 0;

    .item-title {
      font-size: 16px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .item-description {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 12px;
    }
  }

  .item-actions {
    gap: 12px;
    align-self: flex-start;
    margin-top: 4px;
  }
}

// 移动端适配
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-areas:
      "stats stats stats stats stats stats stats stats stats stats stats stats"
      "quick quick quick quick quick quick analytics analytics analytics analytics analytics analytics"
      "list list list list list list list list list list list list";
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    padding: 16px;
    grid-template-areas:
      "stats stats stats stats stats stats stats stats stats stats stats stats"
      "quick quick quick quick quick quick quick quick quick quick quick quick"
      "analytics analytics analytics analytics analytics analytics analytics analytics analytics analytics analytics analytics"
      "list list list list list list list list list list list list";
  }

  .quick-actions .action-buttons {
    grid-template-columns: 1fr;
  }

  .list-item {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;

    .item-icon {
      width: 40px;
      height: 40px;
    }

    .item-actions {
      justify-content: flex-end;
    }
  }
}
</style> 